<template>
  <div class="productDetails">
    <!--    顶部标题栏-->
    <van-nav-bar
        :safe-area-inset-top="true"
        :placeholder="true"
        :fixed="true"
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
    />
    <!-- 商品图片   -->
    <div v-if="productData.large_img" class="productImg">
      <img class="auto-img" :src="productData.large_img"/>
    </div>
    <!-- 商品卡片-->
    <div class="card">
      <!--  商品名称    -->
      <div class="top">
        <div class="name">
          <div class="cName">
            <span>{{ productData.name }}</span>
          </div>
          <div class="eName">
            <span>{{ productData.enname }}</span>
          </div>
        </div>
        <div class="price">
          <span>￥{{ productData.price }}</span>
        </div>
      </div>
      <!--  选项  -->
      <div class="selectOptions">
        <div class="temperature" v-if="temData.length > 1">
          <div class="tem">
            <span>{{ productData.tem_desc }}</span>
          </div>
          <div
              v-for="(item, index) in temData"
              @click="changeTem(item)"
              :class="tem === item ? 'blue' : ''"
              :key="index"
          >
            <span>{{ item }}</span>
          </div>
        </div>
        <div class="temperature" v-if="sugarData.length > 1">
          <div class="tem">
            <span>{{ productData.sugar_desc }}</span>
          </div>
          <div
              v-for="(item, index) in sugarData"
              @click="changeSugar(item)"
              :class="sugar === item ? 'blue' : ''"
              :key="index"
          >
            <span>{{ item }}</span>
          </div>
        </div>
        <div class="temperature" v-if="creamData.length > 1">
          <div class="tem">
            <span>{{ productData.sugar_desc }}</span>
          </div>
          <div
              v-for="(item, index) in creamData"
              @click="changeCream(item)"
              :class="cream === item ? 'blue' : ''"
              :key="index"
          >
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
      <van-divider :hairline="false"></van-divider>
      <!--  选择数量    -->
      <div class="selectQuantity">
        <div>
          <span>选择数量</span>
        </div>
        <div class="right">
          <van-stepper
              v-model="num"
              theme="round"
              button-size="20"
              disable-input
          />
        </div>
      </div>
      <van-divider :hairline="false"></van-divider>
      <!--   商品描述   -->
      <div class="desc">
        <div class="title">
          <span>商品描述</span>
        </div>
        <div class="container" v-for="(item, index) in descData" :key="index">
          <span>{{ index + 1 }}</span>
          <span>、</span>
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
    <div style="height: 30px"></div>
    <!--底部商品导航-->
    <van-goods-action>
      <van-goods-action-icon icon="bag" text="购物袋" :badge="badge===0?'':badge"
                             :color="badge===0?'#646566':'#0c34ba'"
                             @click="$router.push('/shopbag')"
      />
      <van-goods-action-icon icon="like"
                             :text="isCollect===true?'已收藏':'未收藏'"
                             :color="isCollect===true?'#0c34ba':'#646566'"
                             @click="changeLike()"/>
      <van-goods-action-button
          color="#6a91ec"
          type="warning"
          text="加入购物车"
          @click="addShopcart"
      ></van-goods-action-button>
      <van-goods-action-button color="#0c34ba" type="danger" text="立即购买"/>
    </van-goods-action>
  </div>
</template>

<script>
import {findlike, getProductDetails, like, notlike} from "@/api/product";
import {addShopcart, shopcartRows} from "@/api/shopbag";

export default {
  name: "productDetails",
  data() {
    return {
      pid: "",
      productData: [],
      temData: [], //温度
      tem: "",
      sugarData: [], //糖
      sugar: "",
      num: 1, //选择数量
      descData: [],
      creamData: [],
      cream: "",
      badge: 0,
      tokenString: '',
      isCollect: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      self.tokenString = this.$cookies.get("tokenString");
      self.pid = self.$route.query.pid;
      getProductDetails(self.pid).then((res) => {
        self.productData = res.data.result[0];
        // 对温度、糖量进行解析
        let tem = self.productData.tem;
        self.temData = tem.split("/");
        self.tem = self.temData[0];
        // 对sugar进行处理
        let sugar = self.productData.sugar;
        self.sugarData = sugar.split("/");
        self.sugar = self.sugarData[self.sugarData.length - 1];
        // 对desc进行处理
        let desc = self.productData.desc;
        self.descData = desc.split("\n");
        // 对cream进行处理
        let cream = self.productData.cream;
        self.creamData = cream.split("/");
        self.cream = self.creamData[0];
      });
      // 查询是否收藏
      self.findCollect();
      self.shopcartRows();
    },
    // 改变温度
    changeTem(item) {
      this.tem = item;
    },
    changeSugar(item) {
      this.sugar = item;
    },
    changeCream(item) {
      this.cream = item;
    },
    // 查询商品是否收藏
    findCollect() {
      let self = this;
      findlike({
        pid: self.pid,
        tokenString: self.tokenString
      }).then(res => {
        if (res.data.result.length >= 1) {
          self.isCollect = true;
        } else if (res.data.code === 700) {
          this.$toast.fail("用户认证失效，请重新登录！")
          this.$router.push('login')
        } else {
          self.isCollect = false;
        }
      })
    },
    //  进行收藏
    changeLike() {
      let self = this;
      let data = {
        appkey: self.appkey,
        pid: self.pid,
        tokenString: self.tokenString
      };
      if (self.isCollect === true) {
        notlike(data).then(res => {
          if (res.data.code === 900) {
            self.$toast.success({
              message: '取消收藏成功！',
              duration: 1000
            });
            self.findCollect();
          }
        })
      } else {
        like(data).then(res => {
          if (res.data.code === 800) {
            self.$toast.success({
              message: '收藏成功！',
              duration: 1000
            });
            self.findCollect();
          }
        })
      }
    },
    //   加入购物车
    addShopcart: function () {
      let self = this;
      let rule = '';
      if (self.tem !== '') {
        rule = self.tem
      }
      if (self.sugar !== '') {
        rule += '/' + self.sugar
      }
      if (self.cream !== '') {
        rule += '/' + self.cream
      }
      let data = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: self.tokenString,
        pid: self.pid,
        count: self.num,
        rule: rule
      }
      addShopcart(data).then(res => {
        if (res.data.code === 3000) {
          self.$toast.success({message: res.data.msg, duration: 1500})
          self.init();
        } else {
          self.$toast.fail(res.data.msg)
        }
      })
    },
    shopcartRows() {
      let self = this;
      let data = {
        tokenString: self.tokenString
      }
      shopcartRows(data).then(res => {
        self.badge = res.data.result
      })
    }
  },
};
</script>

<style scoped lang="less">
.productDetails {
  background: #e8e8e8;

  // .productImg {
  // }

  .card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 20px 5px 20px 5px;
    position: relative;
    margin: -30px 10px 30px 10px;

    div {
      padding: 0 5px;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 16px;
        color: #222;

        .cName {
          font-weight: 700;
        }

        .eName {
          font-weight: 300;
          margin: 5px 0;
          font-size: 12px;
        }
      }

      .price {
        font-size: 18px;
        color: #0a33b9;
        font-weight: bold;
      }
    }

    .selectOptions {
      .temperature {
        display: flex;
        margin-top: 8px;

        .tem {
          background: #ffffff;
          margin-right: 10px;
          text-align: left;
          width: 40px;
        }

        div {
          text-align: center;
          padding: 4px 8px;
          margin: 2px 5px;
          width: 60px;
          background: #e8e8e8;
          border-radius: 10px;
          font-size: 14px;
        }

        .blue {
          background: #0c34ba;
          color: white;
        }
      }
    }

    .selectQuantity {
      display: flex;
      justify-content: space-between;
      font-size: 14px;

      //对步进器进行样式穿透
      /deep/ .right {
        .van-stepper {
          .van-stepper__minus {
            border: #0c34ba solid 1px;
            color: #0c34ba;
          }

          .van-stepper__plus {
            background: #0c34ba;
          }
        }
      }
    }

    .desc {
      font-size: 14px;

      .container {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
    }
  }
}

/deep/ .van-info {
  background-color: #0c34ba;
}
</style>
